<template>
  <div>
    <el-row class="aaa" style v-if="Object.keys(projectinfo).length !== 0">
<!--      <hamburger  @toggleClick="showMoreTab" :is-active="seenFlag" class="hamburger-container" v-if="loadingHamberger"/>-->
      <!--      <i class="el-icon-loading hamburger-container" v-else></i>-->
      <!-- <el-button @click="showMoreTab" class="morebutton">更多</el-button> -->
      <el-row>
      <el-col :span="20">
      <el-tabs id="elTabsThis" tab-position="top" v-model="tabValue" @tab-click="tabClick" style="margin-top:3px;margin-left: 10px">
        <!-- 循环加载一级tab -->
        <el-tab-pane v-for="(item, index) in tablist" :key="item.code + index" :name="item.code">
          <div slot="label" style="text-align:center;height:25px;">
            <!-- <el-badge is-dot v-if="item.name==='督办'&& superviseidot" /> -->
            <div>
              <el-badge is-dot :hidden="!doShowDot(item) || fromIndexType === 'file' || fromIndexType === 'query'">
                <el-badge :value="(item.code === 'projectBidScore' || item.code === 'projectBidScore1') ? (item.code === 'projectBidScore' ? senondBidScoreNum : firstBidScoreNum) : ''" :max="99" style="margin-top: 3px">
                  <img style=" width: 20px; height: 20px;" :src="item.iconimg" />
                </el-badge>
              </el-badge>
              <div style="height:20px;font-size:12px;margin-bottom:-20px">{{ item.name }}</div>

              <!-- <i class="el-icon-date"></i> -->
            </div>
          </div>
          <!-- 如果有二级tab，则加载二级tab -->
          <el-tabs class="secondTabs" v-if="item.children.length > 0" tab-position="top" @tab-click="subTabClick" v-model="subTabName">
            <el-tab-pane v-for="(o, indexSub) in item.children" :key="'subTab' + indexSub" :name="o.code">
              <div slot="label" style="height:30px;line-height:30px;">
                <!-- <i class="el-icon-date"></i> -->
                <el-row type="flex" justify="center">
                  <!--                <el-col :span="10" style="padding-top:4px" type="flex" justify="end">-->
                  <!--                  <el-row type="flex" justify="end"><img style="width: 20px; height: 20px;" :src="o.iconimg"/></el-row>-->
                  <!--                </el-col>-->
                  <el-col :span="24" type="flex" justify="start">{{ o.name }}</el-col>
                </el-row>
              </div>
              <!-- 加载tab内容 -->
            </el-tab-pane>
          </el-tabs>
        </el-tab-pane>
      </el-tabs>
      </el-col>
      <el-col :span="4">
      <el-switch
        v-model="switchDefault"
        v-loading="!loadingHamberger"
        @change="showMoreTab"
        active-text="展开"
        inactive-text="隐藏"
        class="switch-pos">
      </el-switch>
      </el-col>
      </el-row>
      <el-row v-if="componentList.length > 0">
        <el-col v-for="(componentTemp, componentIndex) in componentList" :span="componentTemp.spannum" :key="componentTemp.id + componentIndex">
          <component :is="componentTemp.code" :ref="componentTemp.code" :projectId="projectId" :projectinfo="projectinfo" :moduleEditFlag="componentTemp.editflag" :fromIndexType="fromIndexType" @refreshIndex="refreshTab"></component>
        </el-col>
      </el-row>
      <!-- <span v-else>您没有任何TAB权限</span> -->
    </el-row>
    <div v-if="Object.keys(projectinfo).length === 0" v-loading="Object.keys(projectinfo).length === 0" style="height: 1000px"></div>
  </div>
</template>

<script>
import { validateNull } from '@tapui/utils/validate'
import { getTabAndComponents } from '../../../../api/projectIndexInfo'
import { getAction, putAction, postAction } from '@tapui/utils/http'
import projectGantt from '@/views/mpm/mpmProjectProgress/progressGantt'
import mpmProjectPlan from '@/views/mpm/mpmProjectPlan/index'
import mpmProjectPlanQuery from '@/views/mpm/mpmProjectPlan/indexQuery'
import mpmProjectBidGuide from '@/views/mpm/mpmProjectBidGuide/indexQuery'
import mpmProjectMilepost from '@/views/mpm/mpmProjectMilepost/indexQuery'
import mpmProjectMilepostQuery from '@/views/mpm/mpmProjectMilepost/indexProjectQuery'
import mpmProjectAppointment from '@/views/mpm/mpmProjectAppointment/indexTrack'
import mpmProjectAppointmentQuery from '@/views/mpm/mpmProjectAppointment/indexQuery'
import mpmProjectTeam from '@/views/mpm/mpmProjectTeam/indexQuery'
import mpmProjectTeamQuery from '@/views/mpm/mpmProjectTeam/indexProjectQuery'
import mpmProjectTask from '@/views/mpm/mpmProjectTask/indexQuery'
import mpmProjectTaskQuery from '@/views/mpm/mpmProjectTask/indexProjectQuery'
import mpmProject from '@/views/mpm/mpmProject/editTrack'
import mpmProjectReview from '@/views/mpm/mpmProjectReview/indexEdit'
import mpmProjectReviewQuery from '@/views/mpm/mpmProjectReview/indexQuery'
import mpmProjectSupervise from '@/views/mpm/mpmProjectSupervise/index'
import mpmProjectSuperviseQuery from '@/views/mpm/mpmProjectSupervise/indexQuery'
import mpmProjectProblem from '@/views/mpm/mpmProjectProblem/index'
import mpmProjectProblemQuery from '@/views/mpm/mpmProjectProblem/indexQuery'
import mpmProjectStakeholder from '@/views/mpm/mpmProjectStakeholder/index'
import mpmProjectStakeholderQuery from '@/views/mpm/mpmProjectStakeholder/indexQuery'
import mpmProjectDemand from '@/views/mpm/mpmProjectDemand/index'
import mpmProjectDemandQuery from '@/views/mpm/mpmProjectDemand/indexQuery'
import mpmProjectUniversalChange from '@/views/mpm/mpmProjectUniversalChange/index'
import mpmProjectUniversalChangeQuery from '@/views/mpm/mpmProjectUniversalChange/indexQuery'
import mpmProjectRisk from '@/views/mpm/mpmProjectRisk/index'
import mpmProjectRiskQuery from '@/views/mpm/mpmProjectRisk/indexQuery'
import mpmProjectCommunication from '@/views/mpm/mpmProjectCommunication/index'
import mpmProjectCommunicationQuery from '@/views/mpm/mpmProjectCommunication/indexQuery'
import mpmProjectBidScore from '@/views/mpm/mpmProjectBidScore/index'
import mpmProjectBidScore1 from '@/views/mpm/mpmProjectBidScore/firstindex'
import mpmProjectBidScoreQuery from '@/views/mpm/mpmProjectBidScore/indexQuery'
import mpmProjectBidScoreQuery1 from '@/views/mpm/mpmProjectBidScore/firstindexQuery'
import { MPM_Tab_Seen, MPM_PROJECT_STATE, MPM_Tab_Seen_Start, MPM_Tab_Seen_Appointment } from '@/const/const'
import Hamburger from '@tapui/components/Hamburger'
import mpmProjectFish from '@/views/mpm/mpmProjectTask/indexFish'
export default {
  name: 'projectItemTab',
  // mixins: [mixin_list],
  components: {
    projectGantt,
    mpmProjectPlan,
    mpmProjectMilepost,
    mpmProjectAppointment,
    mpmProjectTeam,
    mpmProjectTask,
    mpmProject,
    mpmProjectStakeholder,
    mpmProjectCommunication,
    mpmProjectCommunicationQuery,
    mpmProjectStakeholderQuery,
    mpmProjectPlanQuery,
    mpmProjectBidGuide,
    mpmProjectMilepostQuery,
    mpmProjectAppointmentQuery,
    mpmProjectTeamQuery,
    mpmProjectTaskQuery,
    mpmProjectReview,
    mpmProjectReviewQuery,
    mpmProjectSupervise,
    mpmProjectSuperviseQuery,
    mpmProjectProblem,
    mpmProjectProblemQuery,
    mpmProjectDemand,
    mpmProjectDemandQuery,
    mpmProjectUniversalChange,
    mpmProjectUniversalChangeQuery,
    mpmProjectRisk,
    mpmProjectRiskQuery,
    mpmProjectBidScore,
    mpmProjectBidScore1,
    mpmProjectBidScoreQuery,
    mpmProjectBidScoreQuery1,
    Hamburger,
    mpmProjectFish
  },
  props: {
    projectinfo: {
      type: Object,
      default: null
    },
    projectRoleCode: {
      type: Number,
      default: NaN
    },
    // 来自于哪个index组件
    fromIndexType: {
      type: String,
      default: ''
    },
    projectId: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      tablist: [],
      isLoad: false,
      componentList: [],
      firstComponets: {},
      tabValue: '',
      subTabName: '',
      editFlag: 0, // 0：挂载不可编辑组件，1挂载可编辑组件
      superviseidot: false,
      isDot: {},
      datas: [],
      // 父组件的projectRoleCode是动态请求返回的，这个值不会在子组件中变化，因此要另外声明一个值存储变化
      roleCode: 0,
      senondBidScoreNum: '',
      firstBidScoreNum: '',
      seenFlag: undefined,
      loadingHamberger: true,
      url: {
        list: '/mpm/projectDemand/list',
        getApproval: '/cbo/approvalNodeIns/getApprovalAllCount',
        getOverdueNum: '/mpm/projectBidScore/getOverdueNum'
      },
      switchDefault: false
    }
  },
  computed: {
    doShowDot() {
      return function(item) {
        // return (item.name === '督办' && this.isDot.dotSupervise) || (item.name === '项目需求' && this.isDot.dotDemand)
        switch (item.name) {
          case '督办':
            return this.isDot.MpmProjectSupervise
          case '需求':
            return this.isDot.MpmProjectDemand
          case '问题':
            return this.isDot.MpmProjectProblem
          case '风险':
            return this.isDot.MpmProjectRisk
          case '任命':
            return this.isDot.MpmProjectAppointment
          case '策划':
            return this.isDot.MpmProjectPlan
          case '复盘':
            return this.isDot.MpmProjectReview
          case '变更':
            return this.isDot.MpmProjectUniversalChange
        }
      }
    },
    isLeader() {
      if (validateNull(this.$store.getters.projectroles)) {
        return false
      } else {
        if (this.$store.getters.projectroles.indexOf('pm') > -1 || this.$store.getters.projectroles.indexOf('owner') > -1 || this.$store.getters.projectroles.indexOf('sponsor') > -1 || this.$store.getters.projectroles.indexOf('pmo') > -1) {
          return true
        } else {
          return false
        }
      }
    },
    isPMO() {
      if (validateNull(this.$store.getters.projectroles)) {
        return false
      } else {
        if (this.$store.getters.projectroles.indexOf('pmo') > -1) {
          return true
        } else {
          return false
        }
      }
    },
    isPMOOrManager() {
      if (validateNull(this.$store.getters.projectroles)) {
        return false
      } else {
        if (this.$store.getters.projectroles.indexOf('pmo') > -1 || this.$store.getters.projectroles.indexOf('pm') > -1) {
          return true
        } else {
          return false
        }
      }
    }
  },
  methods: {
    refreshTab() {
      // this.$emit('refresh')
      this.getAllApprovalInfo()
      this.getOverdueNum()
    },
    getAllApprovalInfo() {
      // 以后改成从后端nodIns /querySouceTypeCount 这个接口获取
      var sourceTypeDict = ['MpmProjectDemand', 'MpmProjectProblem', 'MpmProjectSupervise', 'MpmProjectRisk', 'MpmProjectAppointment', 'MpmProjectPlan', 'MpmProjectReview', 'MpmProjectUniversalChange']
      var sourceTypes = sourceTypeDict.join(',')
      var param = {
        sourcetype: sourceTypes,
        qry_projectcode: this.projectinfo.projectcode
      }
      getAction(this.url.getApproval, param).then((res) => {
        if (res.success) {
          res.result.forEach((item) => {
            this.$set(this.isDot, item.sourcetype, item.count > 0)
          })
        } else {
          this.$tap.alert(res.message, 'warning')
        }
      })
    },
    tabClick(param) {
      var that = this
      var componentListThat = []
      this.componentList = []
      // 获取此tab下挂载的tab
      this.tablist.forEach(function formatter(value, i) {
        // 如获取点击的tab的二级tab
        if (value.code === param.name) {
          // 如果有子tab则加载子tab的第一个tab下挂载的组件
          if (value.children.length > 0) {
            var firstChildren = value.children[0]
            componentListThat = firstChildren.componentsList
            that.subTabName = firstChildren.code
          } else {
            // 如果没有子TAB,则直接加载此tab下挂载的组件
            componentListThat = value.componentsList
          }
        }
      })
      // 过滤不需要挂载的组件
      componentListThat.forEach((element) => {
        if (element.editflag === this.editFlag) {
          this.componentList.push(element)
        }
      })
      // this.componentList = componentListThat
    },
    subTabClick(param) {
      this.componentList = []
      var componentListThat = []
      // 获取此tab下挂载的vue组件
      this.tablist.forEach(function formatter(value, i) {
        if (value.children.length > 0) {
          value.children.forEach((item, index) => {
            if (item.code === param.name) {
              componentListThat = item.componentsList
            }
          })
        } else {
          if (value.code === param.name) {
            componentListThat = value.componentsList
          }
        }
      })
      // 过滤不需要挂载的组件
      componentListThat.forEach((element) => {
        if (element.editflag === this.editFlag) {
          this.componentList.push(element)
        }
      })
    },
    getTabAndComponentList() {
      getTabAndComponents({ projectRoleCode: this.roleCode }).then((res) => {
        if (res.success) {
          // 初始化显示一级tab内容
          if (validateNull(this.seenFlag)) {
            this.seenFlag = this.isPMO
            if (this.seenFlag) {
              this.switchDefault = true
            }
          }
          if (this.seenFlag) {
            // tab全部显示
            this.tablist = res.result
          } else if (validateNull(this.projectinfo.projectstate) || MPM_PROJECT_STATE.inApproval === this.projectinfo.projectstate || MPM_PROJECT_STATE.back === this.projectinfo.projectstate) {
            // 立项阶段，未完成审批
            this.tablist = res.result.filter((item) => MPM_Tab_Seen_Start.indexOf(',' + item.code + ',') > -1)
          } else if (MPM_PROJECT_STATE.inComplete === this.projectinfo.projectstate && MPM_PROJECT_STATE.appointment === String(this.projectinfo.schedulestate)) {
            // 立项阶段审批通过，任命阶段未完成
            this.tablist = res.result.filter((item) => MPM_Tab_Seen_Appointment.indexOf(',' + item.code + ',') > -1)
          } else {
            // 任命阶段完成
            this.tablist = res.result.filter((item) => MPM_Tab_Seen.indexOf(',' + item.code + ',') > -1)
          }
          // 如果非项目经理、经营管理部成员，只显示项目任务模块
          // if (!this.isPMOOrManager) {
          //   let tempPlanList = this.tablist.filter(item => item.code === 'projectPlan')[0].children.filter(item => item.code === 'projectTask')
          //   this.$set(this.tablist.filter(item => item.code === 'projectPlan')[0], 'children', tempPlanList)
          // }
        if (this.tablist.length === 0) {
          this.$tap.alert(`提示：抱歉，您不具备查看此项目的任何权限。`, 'warning')
        }
        var componentListThat = []
        if (this.isPMO && this.seenFlag) {
          // 如果是PMO，固定默认显示立项信息
          this.tabValue = 'projectInfo'
          componentListThat = this.tablist.filter((item) => item.code === 'projectInfo')[0].componentsList
        } else {
          if (validateNull(this.projectinfo.projectstate) || MPM_PROJECT_STATE.inApproval === this.projectinfo.projectstate || MPM_PROJECT_STATE.back === this.projectinfo.projectstate) {
            // 如果是其他人员,1、立项阶段，未完成审批，进入后默认显示立项界面
          this.tabValue = 'projectInfo'
          componentListThat = this.tablist.filter((item) => item.code === 'projectInfo')[0].componentsList
          } else if (MPM_PROJECT_STATE.inComplete === this.projectinfo.projectstate && MPM_PROJECT_STATE.appointment === String(this.projectinfo.schedulestate)) {
            // 2、立项阶段审批通过，任命阶段未完成，进入后默认显示任命阶段
            componentListThat = this.getComponentListThat('projectAppointment')
          } else if (MPM_PROJECT_STATE.inComplete === this.projectinfo.projectstate && MPM_PROJECT_STATE.plan === String(this.projectinfo.schedulestate)) {
            // 3、任命阶段完成，策划阶段未完成审批，进入后默认显示策划-策划书界面, 非项目经理显示任务页面
            componentListThat = this.getComponentListThat('projectPlan')
          } else {
            // 4、策划书审批通过后，默认显示策划-项目任务界面
            componentListThat = this.getComponentListThat('projectPlan', 'projectTask')
          }
        }
        // 过滤不需要挂载的组件
        componentListThat.forEach((element) => {
          if (element.editflag === this.editFlag) {
            this.componentList.length = 0
            this.componentList.push(element)
          }
        })
        this.loadingHamberger = true
        } else {
          this.loadingHamberger = true
          this.$tap.alert(res.message, 'warning')
        }
      })
    },
    // 获取评标细则右上角角标，标识超期评标细则数量
    getOverdueNum() {
      getAction(this.url.getOverdueNum, { projectcode: this.projectinfo.projectcode }).then((res) => {
        if (res.success) {
          if (this.isLeader) {
            this.senondBidScoreNum = validateNull(res.result) ? '' : (res.result.filter((item) => item.times === '2').length > 0 ? res.result.filter((item) => item.times === '2').length : '')
            this.firstBidScoreNum = validateNull(res.result) ? '' : (res.result.filter((item) => item.times === '1').length > 0 ? res.result.filter((item) => item.times === '1').length : '')
          } else {
            let temp = res.result.filter((item) => item.responsiblecode === this.$store.getters.user.code)
            this.senondBidScoreNum = validateNull(temp) ? '' : (temp.filter((item) => item.times === '2').length > 0 ? temp.filter((item) => item.times === '2').length : '')
            this.firstBidScoreNum = validateNull(temp) ? '' : (temp.filter((item) => item.times === '1').length > 0 ? temp.filter((item) => item.times === '1').length : '')
          }
        } else {
          this.$tap.alert(res.message, 'warning')
        }
      })
    },
    showMoreTab() {
      this.loadingHamberger = false
      this.seenFlag = !this.seenFlag
      this.getTabAndComponentList()
    },
    // 1、为一、二级tab赋初始值，2、确定显示的组件 childtype 如果传入值,则显示该值对应二级tab的组件内容,其他默认显示第一个
    getComponentListThat(type, childtype) {
      this.tabValue = type
      var temp = []
      if (validateNull(childtype)) {
        temp = this.tablist.filter((item) => item.code === type)[0].children[0]
      } else {
        temp = this.tablist.filter((item) => item.code === type)[0].children.filter((item) => item.code === childtype)[0]
      }
      this.subTabName = temp.code
      return temp.componentsList
    }
  },
  mounted() {
    // 获取在此项目中的角色id
  },
  watch: {
    projectinfo(newValue, oldValue) {
      this.getAllApprovalInfo()
      this.getOverdueNum()
      this.getTabAndComponentList()
    }
  }
}
</script>

<style scoped style="scss">
.aaa {
  margin-left: 2px;
}
.aaa /deep/ .el-row {
  padding-bottom: 0px;
}
.aaa /deep/ #elTabsThis .el-tabs__item {
  line-height: 15px;
  height: 24px;
}
.aaa /deep/ #elTabsThis .el-tabs__nav-scroll {
  padding-bottom: 0px;
}
.aaa /deep/ #elTabsThis .el-tabs__header {
  margin: 0 0 0px;
}
.aaa /deep/ #elTabsThis .el-tabs__nav {
  padding-top: 5px;
  padding-bottom: 6px;
}
.aaa /deep/ .el-tabs__nav-wrap::after {
  height: 1px;
}
.secondTabs /deep/ .el-tabs__nav-wrap::after {
  display: none;
}
.aaa /deep/ .hamburger-container {
    position: absolute;
    top: 3px;
    right: 5px;
    z-index: 8700;
    line-height: 50px;
    height: 50px;
    cursor: pointer;
    transition: 0.3s;
    -webkit-tap-highlight-color: transparent;
    font-size: 22px;
    color: #0A6ED2;
}
.aaa /deep/ .el-icon-loading.hamburger-container {
  right: 20px;
}
.switch-pos {
  float: right;
  top: 23px;
  right: 10px;
  z-index: 8700;
}
</style>
